<template>
	<view class="container">
		<image :src="defaultAvatarUrl" class="header"></image>
		<view class="function-box">
			<view class="header-title">
				<view class="title">
					<image src="../../../static/img/userManager/title.png"></image>
					<view>
						<text>可燃气体监测 AIOT云服务</text>
						<text>(微信小程序)</text>
					</view>
				</view>
				<view class="cil-right"></view>
				<view class="cil-left"></view>
				<ul>
					<li v-for="(item,i) in functionTitle" :key="i+'title'">
						<view>
							<image src="../../../static/img/userManager/circular.png"></image>
						</view>
						<text>{{item}}</text>
					</li>
				</ul>
			</view>
			<view class="clasp">
				<image src="../../../static/img/userManager/clasp.png"></image>
				<image src="../../../static/img/userManager/clasp.png"></image>
			</view>
			<view class="function">
				<view class="title" style="height:142rpx;padding-top: 50rpx;">
					<image src="../../../static/img/userManager/title.png"></image>
					<view>
						<text>功能介绍</text>
					</view>
				</view>
				<view class="cil-right"></view>
				<view class="cil-left"></view>
				<ul v-for="(item,i) in functionLsit"  :key="i">
					<view class="li-title">
						<image :src="item.url"></image>
						<text>{{item.title}}</text>
					</view>
					<li v-for="i in item.text" :key='i'>
						<view>
							<image src="../../../static/img/userManager/circular.png"></image>
						</view>
						<text>{{i}}</text>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		mixin
	} from '../../../common/mixins.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				functionTitle: ["以城市安全运行为目标，针对城市生命线（燃气、油气、供排水、热力、电力、通 讯）地下相邻空间",
					"采用地下可燃气体监测技术，加强户外可燃气体泄漏风险管控",
					"防控城市可燃气体重大安全事故的安全产品",
				],
				functionLsit: [{
					title: "报警-即实时报警",
					url: "../../../static/img/userManager/alarm.png",
					text: ["列表形式分别展示实时的可燃气体报警和监测设备异常信息", "及时掌握到不同级别的可燃气体浓度超标报警及监测设备运行工况"]
				}, {
					title: "地图-即地图模式",
					url: "../../../static/img/userManager/map.png",
					text: ["GIS地图直观呈现可燃气体报警和监测设备异常地理分布，直接掌握报警位置及详情", "支持定位导航，方便规划现场处置行驶路线"]
				}, {
					title: "分析-即统计分析",
					url: "../../../static/img/userManager/analyze.png",
					text: ["按照年月日的时间维度分别统计可燃气体报警和监测设备异常情况，掌握报警变化趋势及治理效果", ]
				}, {
					title: "管理-即系统管理",
					url: "../../../static/img/userManager/person.png",
					text: ["展示小程序运营商产品营销推广和应用成效", "介绍小程序业务定位和使用功能、个人登录信息管理和版本更新信息"]
				}],
				defaultAvatarUrl: 'https://6761-gas-monitor-01-16c3ed-1303022585.tcb.qcloud.la/gasAiot/head-marketing.png',
			};
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		.header {
			width: 100%;
			height: 600rpx;
		}
		.title {
			height: 166rpx;
			padding: $uni-spacing-col-36;
			display: flex;
			flex-direction: row;
			border-bottom: 4rpx dashed #F4F4F4;
			image {
				width: 61rpx;
				height: 50rpx;
				position: absolute;
			}
			view {
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				text-align: center;
				text:first-child {
					color: #4187F1;
					font-size: 36rpx;
					font-weight: 800;
				}
				text:last-child {
					color: #333333;
					font-size: 28rpx;
					font-weight: 800;
				}
			}
		}
		.cil-right {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			position: absolute;
			top: 148rpx;
			right: -15rpx;
			background-color: #E8F4FE;
		}

		.cil-left {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			position: absolute;
			top: 148rpx;
			left: -15rpx;
			background-color: #E8F4FE;
		}
		//body
		ul {
			padding: $uni-spacing-col-36;
			li {
				display: flex;
				flex-direction: row;
				// line-height: 26rpx;
				padding: $uni-spacing-col-lg 0;
				text {
					width: 540rpx;
					font-size: 28rpx;
					color: #666666;
					// font-weight: 500;
					line-height: 42rpx;
				}
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 26rpx;
				}
			}
		}
		.function-box {
			top: -58rpx;
			padding: $uni-spacing-col-36;
			position: relative;
			background: #E8F4FE;
			border-top-left-radius: 48rpx;
			border-top-right-radius: 48rpx;
			width: 100%;
			margin-bottom: -58rpx;
			.header-title {
				background-color: #fff;
				border-radius: 16rpx
			}
			.function {
				border-radius: 16px;
				margin-top: 20rpx;
				background-color: #fff;
				.title {
					text {
						color: #4187F1 !important;
						font-size: 42rpx !important;
						font-weight: 800;
					}
					image {
						position: absolute;
						left: 150rpx
					}
				}
				.li-title {
					margin: 0 auto;
					width: 320rpx;
					padding: 0 15rpx 4rpx 15rpx;
					background: url(../../../static/img/userManager/li-title.png) no-repeat bottom;
					background-size: contain;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
					
					text {
						margin: 0 auto;
						font-size: 32rpx;
						font-weight: 800;
						color: #333333;
					}
				}
			}
			.clasp {
				image {
					position: absolute;
					width: 28rpx;
					height: 83rpx;
					z-index: 999;
					top: -28rpx;

					&:first-child {
						left: 60rpx;
					}

					&:last-child {
						right: 60rpx;
					}
				}
			}
		}
	}
</style>
